<template>
  <div class="index">
    <el-container class="container">
      <el-aside class="aside">
        <div class="logo-wrapper">
          <el-image class="logo" :src="logoUrl"></el-image>
        </div>
        <el-menu router>
          <div v-for="item in this.menus" :key="item.id">
            <el-menu-item :index="item.path" v-if="item.path !== '/'">
              <i :class="item.icon"></i>
              <span slot="title">{{item.title}}</span>
            </el-menu-item>
            <el-submenu :index="item.id + ''" v-if="item.path === '/'">
              <template slot="title">
                <i :class="item.icon"></i>
                <span slot="title">{{item.title}}</span>
              </template>
              <div v-for="subItem in item.subPermissionVos" :key="subItem.id">
                <el-menu-item :index="subItem.path">
                  {{subItem.title}}
                </el-menu-item>
              </div>
            </el-submenu>
          </div>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header class="header">
          <div class="header-left" >
            <el-page-header @back="goBack" :content="this.pageHeader"></el-page-header>
          </div>
          <div class="header-right">
            <el-avatar class="avatar" :src="adminInfo.avatarUrl"></el-avatar>
            <el-dropdown split-button type="primary" @command="handleCommand">
              {{adminInfo.nickName}}
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="a">修改个人信息</el-dropdown-item>
                <el-dropdown-item command="b">修改密码</el-dropdown-item>
                <el-dropdown-item command="c">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
    <el-dialog width="30%" title="修改密码" :visible="showPasswordForm" @close="closePasswordForm">
      <el-form :model="passwordForm" label-width="100px" :rules="passwordRules" ref="passwordForm">
        <el-form-item prop="oldPassword" label="旧密码">
          <el-input v-model="passwordForm.oldPassword" placeholder="输入旧密码" type="password" prefix-icon="el-icon-lock" clearable></el-input>
        </el-form-item>
        <el-form-item prop="newPassword" label="新密码">
          <el-input v-model="passwordForm.newPassword" placeholder="输入新密码" type="password" prefix-icon="el-icon-lock" clearable></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="closePasswordForm">取消</el-button>
        <el-button type="primary" @click="submitPasswordForm">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog width="30%" title="修改个人信息" :visible="showAdminInfoForm"  @close="closeAdminInfoForm">
      <el-form :model="adminInfoForm" label-width="100px" ref="adminInfoForm" :rules="adminInfoRules" >
        <el-form-item prop="avatarUrl" label="头像" style="display: flex; align-items: center">
          <el-upload
              action=""
              class="avatar-uploader"
              accept=".png,.jpg"
              :http-request="uploadAvatar"
              :show-file-list="false">
            <el-image v-if="adminInfoForm.avatarUrl.length > 0" :src="adminInfoForm.avatarUrl"></el-image>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item prop="nickName" label="昵称" >
          <el-input v-model="adminInfoForm.nickName"></el-input>
        </el-form-item>
        <el-form-item prop="gender" label="性别">
          <el-radio-group v-model="adminInfoForm.gender">
            <el-radio :label="true">男</el-radio>
            <el-radio :label="false">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="phoneNumber" label="手机号">
          <el-input v-model="adminInfoForm.phoneNumber"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="closeAdminInfoForm">取消</el-button>
        <el-button type="primary" @click="submitAdminInfoForm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Index",
  data () {
    return {
      logoUrl: require('../assets/images/logo.jpg'),
      showPasswordForm: false,
      passwordForm: {
        oldPassword: '',
        newPassword: ''
      },
      passwordRules: {
        oldPassword: [{ required: true, message: '必填', trigger: 'blur' }],
        newPassword: [{ required: true, message: '必填', trigger: 'blur' }]
      },
      showAdminInfoForm: false,
      adminInfoForm: {
        nickName: '',
        avatarUrl: '',
        gender: true,
        phoneNumber: ''
      },
      adminInfoRules: {
        nickName: [{ required: true, message: '必填', trigger: 'blur' }],
        avatarUrl: [{ required: true, message: '必填', trigger: 'blur' }],
        gender: [{ required: true, message: '必填', trigger: 'blur' }],
        phoneNumber: [{ required: true, message: '必填', trigger: 'blur' }]
      }
    }
  },
  methods:{
    uploadAvatar (param) {
      let formData = new FormData()
      formData.append('file', param.file)
      formData.append('code', 1)
      this.$axios({
        url: '/auth/upload',
        method: 'post',
        data: formData,
        headers: {
          "Content-Type": "multipart/form-data"
        }
      }).then(res => {
        if (res.code === 200) {
          this.adminInfoForm.avatarUrl = window.uploadUrl + res.data
        }
      })

    },
    handleCommand(command) {
      switch (command) {
        case 'a':
          this.editAdminInfoForm()
          break
        case 'b':
          this.showPasswordForm = true
          break
        case 'c':
          this.logout()
          break
      }
    },
    editAdminInfoForm () {
      const adminInfo = this.adminInfo
      this.adminInfoForm = {
        nickName: adminInfo.nickName,
        avatarUrl: adminInfo.avatarUrl,
        gender: adminInfo.gender,
        phoneNumber: adminInfo.phoneNumber
      }
      this.showAdminInfoForm = true
    },
    closeAdminInfoForm () {
      this.showAdminInfoForm = false
      this.adminInfoForm = {
        nickName: '',
        avatarUrl: '',
        gender: true,
        phoneNumber: ''
      }
    },
    submitAdminInfoForm: function () {
      const adminInfoBo = this.adminInfoForm
      this.$refs.adminInfoForm.validate(valid => {
        if (valid) {
          this.$axios.put(`/auth/info`, adminInfoBo).then(res => {
            if (res.code === 200) {
              this.closeAdminInfoForm()
              this.$axios.get('/auth/info').then(res => {
                if (res.code === 200) {
                  this.$store.commit('initAdminInfo', res.data)
                }
              })
            }
          })
        }
      })
    },
    logout () {
      this.$axios.get('/logout').then(res =>{
        if (res.code === 200) {
          this.$router.replace('/login')
          this.$store.commit('clearState')
        }
      })
    },
    closePasswordForm () {
      this.showPasswordForm = false
      this.passwordForm = {
        oldPassword: '',
        newPassword: ''
      }
    },
    submitPasswordForm () {
      this.$refs.passwordForm.validate(valid => {
        if (valid) {
          const adminPasswordBo = this.passwordForm
          this.$axios.put('/auth/password', adminPasswordBo).then(res => {
            if (res.code === 200) {
              this.closePasswordForm()
            }
          })
        }
      })
    },
    goBack () {
      this.$router.back()
    }
  },
  computed:{
    menus () {
      return this.$store.state.menus
    },
    adminInfo () {
      return this.$store.state.adminInfo
    },
    pageHeader () {
      return this.$store.state.pageHeader
    }
  },
  mounted() {
  }
}
</script>

<style lang="scss" scoped>
  .index {
    height: 100%;
    width: 100%;
    .container {
      height: 100%;
      width: 100%;
      .aside {
        height: 100%;
        width: 100%;
        background-color: #ffffff;
        .logo-wrapper {
          width: 100%;
          height: 60px;
          padding: 5px;
          text-align: center;
          box-sizing: border-box;
          .logo {
            height: 100%;
            border-radius: 4px;
          }
        }
      }
      .header {
        position: relative;
        background-color: #ffffff;
        .header-left {
          position: absolute;
          left: 0;
          bottom: 0;
          height: 100%;
          box-sizing: border-box;
          display: flex;
          align-items: center;
        }
        .header-right {
          position: absolute;
          right: 0;
          bottom: 0;
          height: 100%;
          box-sizing: border-box;
          padding: 5px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .avatar {
            margin-right: 20px;
          }
        }
      }
    }
    .avatar-uploader{
      border: 1px dashed #d9d9d9;
      border-radius: 100%;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      width: 70px;
      height: 70px;
      &:hover {
        border-color: #409EFF;
      }
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 70px;
      height: 70px;
      line-height: 70px;
      text-align: center;
    }
  }
</style>
